import {useState} from 'react';
import {sculptureList} from './data.js';

export default function Demo6() {
    const [index, setIndex] = useState(0)
    const [showDetail, setShowDetail] = useState(false)
    const hasNext = index < sculptureList.length - 1

    const handleNextClick = () => {
        if(hasNext) {
            setIndex(index + 1)
        }else {
            setIndex(0)
        }
    }
    const handleDetailChange = () => {
        setShowDetail(!showDetail)
    }

    let item  = sculptureList[index]
    return (
        <section>
            <h1>State: 组件的记忆</h1>
            <button onClick={handleNextClick}>Next</button>
            <p>
                <i>{item.name}</i>
                &nbsp;by&nbsp;
                <strong>{item.artist}</strong>
            </p>
            <p>({index+1} of {sculptureList.length})</p>
            <button onClick={handleDetailChange}>{showDetail ? 'hide' : 'show'} detail</button>
            <p>{ showDetail && item.description }</p>
            <img src={item.url}/>
        </section>
    )
}
